<template>
  <el-dialog :title="title" :model-value="visible" width="600px" append-to-body @close="handleClose">
    <el-form ref="serverFormRef" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务器名称" prop="serverName">
            <el-input v-model="formData.serverName" placeholder="请输入服务器名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务器IP" prop="serverIp">
            <el-input v-model="formData.serverIp" placeholder="请输入服务器IP" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="端口" prop="port">
            <el-input-number v-model="formData.port" :min="1" :max="65535" placeholder="请输入端口" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务器类型" prop="serverType">
            <el-select v-model="formData.serverType" placeholder="请选择服务器类型" style="width: 100%">
              <el-option label="IOT核心服务" value="IOT核心服务" />
              <el-option label="数据处理服务" value="数据处理服务" />
              <el-option label="消息队列服务" value="消息队列服务" />
              <el-option label="存储服务" value="存储服务" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="服务器描述" prop="description">
            <el-input v-model="formData.description" type="textarea" placeholder="请输入服务器描述" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="ServerFormDialog" lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

// Props
interface Props {
  visible: boolean
  formData: any
  title: string
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  formData: () => ({}),
  title: ''
})

// Emits
const emit = defineEmits(['update:visible', 'save', 'cancel'])

// 响应式数据
const serverFormRef = ref()

// 表单验证规则
const rules = reactive({
  serverName: [{ required: true, message: '服务器名称不能为空', trigger: 'blur' }],
  serverIp: [
    { required: true, message: '服务器IP不能为空', trigger: 'blur' },
    { pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/, message: '请输入正确的IP地址', trigger: 'blur' }
  ],
  port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
  serverType: [{ required: true, message: '服务器类型不能为空', trigger: 'change' }]
})

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (!newVal && serverFormRef.value) {
    serverFormRef.value.resetFields()
  }
})

// 提交表单
const handleSubmit = () => {
  if (!serverFormRef.value) return
  
  serverFormRef.value.validate((valid: boolean) => {
    if (valid) {
      emit('save', props.formData)
    } else {
      ElMessage.error('请完善表单信息')
    }
  })
}

// 取消
const handleCancel = () => {
  emit('cancel')
  emit('update:visible', false)
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>